<template>
  <div class="TextVcenter" style="width: 100%;height: 100%;position: absolute;">
    <el-container style="height: 100%;"  class='noneBoder'>
      <el-aside class='noOverflow' style='width: 33%;'>
        <img style="height: 100%;" src="../../assets/img/login_img.png"/>
      </el-aside>

      <el-main style="height: 100%;" class="TextVcenter">
          <div style="width: 50%;">
            <el-card class="box-card">
              <p style="font-size: 1.5rem;">登 录</p>
              <el-form    style="padding-right: 50px;padding-left: 80px;">
                <el-form-item  label="帐 号"  @keyup.enter.native="submitForm()" >
                  <el-input v-model="account"></el-input>
                </el-form-item>
                <el-form-item  label="密 码">
                  <el-input type="password"  @keyup.enter.native="submitForm()" v-model="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="width: 100%;margin-top: 40px;" type="primary" @click="submitForm()">提交</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
      </el-main>

    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data() {
      return {
          password: '',
          account: '',
      };
    },
    components: {

    },
    mounted() {

    },
    beforeDestroy() {

    },
    computed:{

    },
    methods: {
      submitForm() {
        this.$axios.post('http://localhost:777/login',{
          name: this.account,
          password: this.password
        })
        .then(successResponse => {
          if (successResponse.data.status == 200) {
            this.$store.commit("login",successResponse.data.obj);
            this.$notify({
                      title: '登录成功',
                      message: '欢迎回来'+this.account,
                      type: 'success',
                      duration:2500,
            });
            this.$router.push('/')
          }
          else
            this.$message.error(successResponse.data.msg);
        })
        .catch(failResponse => {
          this.$message.error('网络不通畅');
        })
      },

    },
  };
</script>

<style>
  img {
      max-width: 100%;
      max-height: 100%;
  }
</style>
